{% extends 'blog/index.html' %}

{% block self_style %}

{% endblock %}

{% block art_content %}

<div class='article'>
	<div id='article' style='text-align: center;'>
		<h2>{{article.title}}</h2>
	</div>
	<hr>
	{{article.html | safe }}
</div>
<!--<textarea name="editor1" id="editor1" rows="10" cols="80">
    This is my textarea to be replaced with CKEditor.
 </textarea>-->
<script type="text/javascript">
	Vue.config.delimiters = ['[[', ']]'];
	$(function () {
		syntax.adapt_ck()
		syntax.autoload()
		SyntaxHighlighter.all();
		

     	$('#index_container').html(hx.build_index($('.article')))
	})
	
</script>

<script type="text/javascript">
	heads={{heads | safe }}
	row={{row | safe}}
	//for(x in heads){
	//	models[heads[x]['name']]=''
	//}
	//models.art= {{article.pk}}
	//models._form='CommentForm'
	//art_pk=
	meta={
		errors:{},
		row:row,
		heads:heads,
	}
	$(function () {
		new Vue({
			el:'#comment',
			data:{
				meta:meta,
				comments:{{comments |safe | default:'[]'}},
			},
			methods:{
				submit_comment:function () {
					if(!confirm("确认要提交吗？？")){return}
					var self = this
					var post_data=[
					{fun:'save',row:row},
					{fun:'get_art_comment',art_pk:row.art}
					]
					$.post('',JSON.stringify(post_data),function (data) {
						if(data.save.errors){
							update_vue_obj(meta.errors,data.save.errors)
						}
						self.comments= data.get_art_comment
						row.comment=''
					})
				}
		}
		})
	})

</script>


<style type="text/css" media="screen" id="test">
	.short-input{
		max-width:300px;
	}
	.middl-input{
		max-width:500px;
	}
	.warn{
		color: red;
	}
	#index_container{
		padding-left:10px;
	}
	#index_container ul{
		padding: 0px;
		
	}
	#index_container li{
		list-style-type:none;
		position: relative;
		/*left:-30px;*/
	}
</style>
<div class='comment' ng-controller='comment' style='margin-top:50px' id='comment'>
	<h2>留言</h2>
	<field name='nickname' :meta='meta' style='max-width:300px'></field>
	<field name='comment' :meta='meta'></field>
	<button type="button" class="btn btn-success" @click='submit_comment()'>确定</button>

	
  	<div v-for='comment in comments | orderBy "-pk"' style='margin-bottom:30px;'>
	  	<h3><span v-text='comment.nickname'></span></h3>
	  	<hr>
	  	<div v-text='comment.comment' style='margin-left:30px;'></div>
  	</div>
</div>
{% include 'fields.html' %} 

{% endblock %}

{% block index %}
<div class='info_panel'>
	<div class='info_head'>
		索引
	</div>
	<div id='index_container'>
		
	</div>
</div>	
{% endblock %}